<script type="text/javascript">
	$(function() {

		var showMenu = true;
		var selectedEffect = "drop";
		var options = {};
		
		
		//set effect from select menu value
		$("#mainMenuButton").click(function() {

			if( showMenu ) { 
				$("#mainMenuEffect").show( "drop", options, 500 );
			} else {
				$("#mainMenuEffect").hide( "highlight", options, 200 );
			}		

			showMenu = !showMenu;
			
			return false;
		});

		$("body").click(function() {

			if( !showMenu ) {
				$("#mainMenuEffect").hide( "highlight", options, 200 );
				showMenu = !showMenu;
			}
		});

		
		$("#mainMenuEffect").hide();
	});
</script>

<a href="#" id="mainMenuButton">&nbsp;</a>
<div class="mainMenuContainer">
	<div id="mainMenuEffect" class="ui-widget-content ui-corner-all">
		<h3 class="ui-widget-header ui-corner-all"><fmt:message key="dokobu.menu.mainMenu"/></h3> 
		<c:forEach var="navElement" items="${mainNav}">
			<c:if test="${navElement.group}">
				<div class="mainMenuSubGroupDiv">
					<span class="boldtext"><fmt:message key="${navElement.nameKey}"/></span>
					<ul>
						<c:forEach var="navItem" items="${navElement.navElements}">
							<li>
								<a href="${navItem.link}" title="<fmt:message key="${navItem.descKey}"/>">
									<fmt:message key="${navItem.nameKey}"/>
								</a>
							</li>				
						</c:forEach>			
					</ul>
				</div>
			</c:if>   
		</c:forEach>
	</div>
</div>